<!-- 接入后端进行加密解密 -->
<!-- 测试结果:后端接受正常,国密算法处理异常数据格式问题 -->
<!-- <template>
  <div>
    <h1>前后端加密解密验证</h1>
    <input type="text" v-model="text" placeholder="输入明文" />
    <button @click="handleSign">签名</button>
    <p>签名: {{ signature }}</p>
    <button @click="handleEncrypt">加密</button>
    <p>加密数据: {{ encryptedText }}</p>
    <button @click="handleDecrypt">解密</button>
    <p>解密数据: {{ decryptedText }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      text: '',
      signature: '',
      encryptedText: '',
      decryptedText: ''
    };
  },
  methods: {
    async handleSign() {
      // 这里可以使用JavaScript库进行SM2签名
      // 例如：sm-crypto库
      const signature = await this.signWithSM2(this.text);
      this.signature = signature;
    },
    async handleEncrypt() {
      try {
        const response = await axios.post('/api/encrypt', { text: this.text, signature: this.signature });
        this.encryptedText = response.data.encryptedText;
      } catch (error) {
        console.error('加密失败:', error.response ? error.response.data : error);
      }
    },
    async handleDecrypt() {
      try {
        const response = await axios.post('/api/decrypt', { encryptedText: this.encryptedText });
        this.decryptedText = response.data.decryptedText;
      } catch (error) {
        console.error('解密失败:', error);
      }
    },
    async signWithSM2(text) {
      // 这里可以使用sm-crypto库进行SM2签名
      // 示例代码：
      const sm2 = require('sm-crypto').sm2;
      const keypair = sm2.generateKeyPairHex();
      const publicKey = keypair.publicKey;
      const privateKey = keypair.privateKey;
      const signature = sm2.doSignature(text, privateKey);
      return signature;
      // return '示例签名'; // 替换为实际签名逻辑
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style> -->



<!-- 仅仅在前端进行加密解密不接入后端 -->
<!-- <template>
  <div>
    <h1>前后端加密解密验证</h1>
    <input type="text" v-model="text" placeholder="输入明文" />
    <button @click="handleSign">签名</button>
    <p>签名: {{ signature }}</p>
    <button @click="handleEncrypt">加密</button>
    <p>加密数据: {{ encryptedText }}</p>
    <button @click="handleDecrypt">解密</button>
    <p>解密数据: {{ decryptedText }}</p>
  </div>
</template>

<script>
import axios from 'axios';
import { sm2 } from 'sm-crypto';

export default {
  data() {
    return {
      text: '',
      signature: '',
      encryptedText: '',
      decryptedText: '',
      publicKey: '',
      privateKey: ''
    };
  },
  methods: {
    async handleSign() {
      if (!this.privateKey) {
        const keypair = sm2.generateKeyPairHex();
        this.publicKey = keypair.publicKey;
        this.privateKey = keypair.privateKey;
      }
      const signature = sm2.doSignature(this.text, this.privateKey);
      this.signature = signature;
    },
    async handleEncrypt() {
      if (!this.publicKey) {
        const keypair = sm2.generateKeyPairHex();
        this.publicKey = keypair.publicKey;
        this.privateKey = keypair.privateKey;
      }
      const encryptedText = sm2.doEncrypt(this.text, this.publicKey);
      this.encryptedText = encryptedText;
    },
    async handleDecrypt() {
      if (!this.privateKey) {
        const keypair = sm2.generateKeyPairHex();
        this.publicKey = keypair.publicKey;
        this.privateKey = keypair.privateKey;
      }
      const decryptedText = sm2.doDecrypt(this.encryptedText, this.privateKey);
      this.decryptedText = decryptedText;
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style> -->




<template>
  <el-container style="height: 600px; border: 1px solid #eee">
    <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">国密算法工具箱</el-header>
    <el-container>
      <!-- 左侧 菜单栏 -->
      <el-aside width="230px" style="background-color: rgb(238, 241, 246); border: 1px solid #ddd;">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">加密解密系统  - SM2 加密解密</template>
              <el-menu-item index="1-1">
                <router-link to="/sm2">SM2</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/sm3">SM3</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/sm4">SM4</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 右侧 内容 -->
      <el-main>
        <div>
          <h1>SM2前后端加密解密验证</h1>
          <!-- 输入明文 -->
          <el-input v-model="text" placeholder="输入明文" style="margin-bottom: 15px;"></el-input>

          <!-- 操作按钮组 -->
          <el-row :gutter="10" style="margin-bottom: 15px;">
            <el-col :span="8">
              <el-button @click="handleGenerateKeys" type="primary">生成公钥私钥</el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="handleSign" :loading="loading.sign" type="success">签名</el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="handleEncrypt" :loading="loading.encrypt" type="info">加密</el-button>
            </el-col>
          </el-row>

          <el-row :gutter="10" style="margin-bottom: 15px;">
            <el-col :span="8">
              <el-button @click="handleDecrypt" :loading="loading.decrypt" type="warning">解密</el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="handleClear" type="danger">清空</el-button>
            </el-col>
          </el-row>

          <!-- 输出结果区 -->
          <el-collapse v-if="publicKey || privateKey || signature || encryptedText || decryptedText">
            <el-collapse-item title="密钥" v-if="publicKey && privateKey">
              <p>公钥: {{ publicKey }}</p>
              <p>私钥: {{ privateKey }}</p>
            </el-collapse-item>
            <el-collapse-item title="签名结果" v-if="signature">
              <p>签名: {{ signature }}</p>
            </el-collapse-item>
            <el-collapse-item title="加密数据" v-if="encryptedText">
              <p>加密数据: {{ encryptedText }}</p>
            </el-collapse-item>
            <el-collapse-item title="解密数据" v-if="decryptedText">
              <p>解密数据: {{ decryptedText }}</p>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { sm2 } from 'sm-crypto';

export default {
  data() {
    return {
      text: '',
      signature: '',
      encryptedText: '',
      decryptedText: '',
      publicKey: '',
      privateKey: '',
      loading: {
        sign: false,
        encrypt: false,
        decrypt: false
      }
    };
  },
  methods: {
    async handleGenerateKeys() {
      const keypair = sm2.generateKeyPairHex();
      this.publicKey = keypair.publicKey;
      this.privateKey = keypair.privateKey;
      this.$message.success("公钥和私钥已生成");
    },
    async handleSign() {
      if (!this.privateKey || !this.text) {
        this.$message.warning("请先生成公钥私钥并输入明文");
        return;
      }
      this.loading.sign = true;
      setTimeout(() => {
        this.signature = sm2.doSignature(this.text, this.privateKey);
        this.loading.sign = false;
        this.$message.success("签名成功");
      }, 500);
    },
    async handleEncrypt() {
      if (!this.publicKey || !this.text) {
        this.$message.warning("请先生成公钥私钥并输入明文");
        return;
      }
      this.loading.encrypt = true;
      setTimeout(() => {
        this.encryptedText = sm2.doEncrypt(this.text, this.publicKey);
        this.loading.encrypt = false;
        this.$message.success("加密成功");
      }, 500);
    },
    async handleDecrypt() {
      if (!this.privateKey || !this.encryptedText) {
        this.$message.warning("请先生成公钥私钥并加密数据");
        return;
      }
      this.loading.decrypt = true;
      setTimeout(() => {
        this.decryptedText = sm2.doDecrypt(this.encryptedText, this.privateKey);
        this.loading.decrypt = false;
        this.$message.success("解密成功");
      }, 500);
    },
    handleClear() {
      this.text = '';
      this.signature = '';
      this.encryptedText = '';
      this.decryptedText = '';
      this.publicKey = '';
      this.privateKey = '';
      this.$message.success("所有数据已清空");
    }
  }
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
  color: #333;
}
p {
  word-wrap: break-word;
  word-break: break-all;
}
</style>
























